<template>
  <div class="app-container">
    <el-table
      :data="list"
      style="width: 100%"
      :row-class-name="getRowClass"
      border
      >

      <el-table-column
        label="头像"
        prop="img"
        min-width="6%">
        <template slot-scope="scope">
          <img  :src="scope.row.img" alt="" style="width: 50px;height: 50px">
        </template>
      </el-table-column>
      <el-table-column
        label="昵称"
        prop="name"
        min-width="8%">
      </el-table-column>
      <el-table-column
        label="地点"
        prop="blogId"
        align="center"
        min-width="5%">
      </el-table-column>
      <el-table-column
        label="时间"
        prop="createTime"
        min-width="13%"
        :formatter="convertTime">
      </el-table-column>
      <el-table-column
        label="内容"
        prop="content"
        min-width="60">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="10%">
        <template slot-scope="scope">
          <el-button @click="delComment(scope.row)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
          <el-button @click="reply(scope.row)" size="mini" type="primary" icon="el-icon-s-promotion" circle></el-button>
        </template>
      </el-table-column>


      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-for="(item,index) in (props.row.list)" :key="index">
<!--              <span>{{ item.id }}</span>-->
            <div class="childrenComment">
              <div style="width: 3%">
                <img :src="item.img" alt="" style="width: 35px;height: 35px">
              </div>
              <el-divider direction="vertical"></el-divider>
              <div style="width: 8%">
                <span>{{ item.name }}</span>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div style="width: 8%">
                <span>to:{{item.pname}}</span>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div style="width: 15%">
                <span>{{ item.careteTime | formatDate}}</span>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div style="width: 80%">
                <span>{{ item.content }}</span>
              </div>
              <el-divider direction="vertical"></el-divider>
<!--              <div style="width: 7%;flex-direction: column" class="childrenComment">-->
              <div style="width: 10%;">
                <el-button @click="delCommentChil(props.row,index)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                <el-button @click="replyChil(props.row)" size="mini" type="primary" icon="el-icon-s-promotion" circle></el-button>
              </div>
            </div>
            <span v-if="index!==props.row.list.length-1">
              <el-divider></el-divider>
            </span>
          </div>
        </template>
      </el-table-column>

    </el-table>

    <div class="pageHelper">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allList.length"
        hide-on-single-page
        @current-change="changPage"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="回复"
      :visible.sync="dialogVisible"
      v-loading="loading"
      width="30%">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入回复内容"
          v-model="textarea">
        </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitComment">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

  import {getCommentList,delComment,delCommentChildren,addComment} from "@/api/comment";
  import {parseTime} from "@/utils";

  export default {
  name: 'commentManagement',
  filters: {
    formatDate(time) {
      return parseTime(time,'{y}-{m}-{d} {h}:{i}')
    }
  },
  data() {
    return {
      allList: [],
      currentIndex: 1,
      limit: 10,
      list:[],
      dialogVisible: false,
      textarea:'',
      pId:'',
      flag:'',
      pName:'',
      index:'',//辅助用,目标评论的index
      loading:false
    }
  },
  created() {
    this.getList()//初始化数据
  },
  methods: {
    getList() {
      getCommentList().then(res=>{
        const allList=res.data;
        let newList=null;
        let index=0;
        let cIndex=0;
        newList = allList.map(v => {
          v.index=index;
          if(v.list!==undefined&&v.list!==null){
            v.list.map(c=>{
              c.pIndex=index;
              c.index=cIndex;
              cIndex++;
            })
          }
          index++;
          cIndex=0;
          return v
        })
        this.allList=newList;
        this.list=newList.slice(0,this.limit)//>=0&&<=9 10个
      })
    },
    convertTime(row,column){
      return parseTime(row.createTime,'{y}-{m}-{d} {h}:{i}')
    },
    getRowClass(row,rowIndex){
      if((row.row.list===undefined||row.row.list===null)&&!row.row.status) {
        return 'expand'
      }
      else if(row.row.status===true) {
        return 'expand newUnreadComment'
      }
      else {
        return 'success-row'
      }
    },
    delComment(row){
      console.log(row)
        //是父评论删除
      if(row.list!==undefined&&row.list!==null&&row.list.length!==0){
        //终止,不可删除
        this.$message.error('子评论存在,不可删除');
        return;
      }

      this.$confirm('确定要删除此主评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delComment(row.id).then(()=>{
          this.allList.splice(row.index,1);
          for(let i=row.index;i<this.allList.length;i++){
            this.allList[i].index-=1;
          }
          this.changPage(this.currentIndex);
          this.$message({
            type: 'success',
            message: '已删除'
          });
        }).catch(()=>{
          this.$message({
            type: 'warning',
            message: '删除失败'
          });
        })
      }).catch(()=>{
        //取消删除
      });
    },
    reply(row){
      console.log(row);
      //回复父评论
      this.index=row.index;//辅助用
      this.pId=row.id;
      this.pName=row.name;
      this.flag=false;
      this.dialogVisible=true;//显示对话框
    },
    replyChil(row){
      console.log(row)
      //回复子评论
      this.index=row.index;//辅助用
      this.pId=row.id;
      this.pName=row.name;
      this.flag=true;
      this.dialogVisible=true;//显示对话框
    },
    delCommentChil(row,cIndex){
      this.$confirm('确定要删除此子评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCommentChildren(row.list[cIndex].id).then(()=>{
          //删除目标父评论里的子评论
          this.allList[row.index].list.splice(cIndex,1);
          //再管理一下子评论的下标
          for(let i=cIndex;i<this.allList[row.index].list.length;i++){
            this.allList[row.index].list[i].index-=1;
          }
          this.$message({
            type: 'success',
            message: '已删除'
          });
        }).catch(()=>{
          this.$message({
            type: 'warning',
            message: '删除失败'
          });
        })
      }).catch(()=>{
        //取消删除
      });
    },
    changPage(currentIndex){
      if(currentIndex>Math.ceil(this.allList.length/this.limit))//向上取整
        currentIndex=Math.ceil(this.allList.length/this.limit);
      this.currentIndex=currentIndex;
      const arr=this.getListArray;
      this.list=this.allList.slice(arr[0],arr[1]);
    },
    submitComment(){
      if(this.textarea.length===0){
        this.$message.error('请输入内容');
        return;
      }
      this.loading=true;
      const data={
        flag:this.flag,
        content:this.textarea,
        pId:this.pId,
        pName:this.pName
      }
      console.log(data)
      addComment(data).then(res=>{
        console.log(res)
        this.$message({
          type: 'success',
          message: '回复成功'
        });
        //开始重新整理评论,在响应里将此条评论添加在子评论里面去,响应的属性还需要我们添加index(子评论的序号)和pIndex
        //data里面已经有父评论所在的index(pIndex),   只需要算index
        const c=res.data;
        c.pIndex=this.index;

        if(this.allList[this.index].list===null||this.allList[this.index].list===undefined) {
          c.index = 0;
          this.allList[this.index].list=[]
        }
        else {
          c.index = this.allList[this.index].list.length;
        }

        this.allList[this.index].list.push(c);

        this.dialogVisible=false;
        this.textarea='';
        this.loading=false;
      }).catch(err=>{
        //错误
        this.dialogVisible=false;
        this.loading=false;
      })
    }
  },
  computed:{
    getListArray(){
      const currentIndex=this.currentIndex;
      const start=(currentIndex-1)*this.limit;//起始下标
      const end=start+this.limit;
      return [start,end];
    }
  }
}
</script>

<style lang="scss">/* todo  这里是全局作用,以后开发得注意 我去掉了scoped,就可以了*/
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .expand .el-table__expand-column .cell {
    display: none;
  }
  .el-table .success-row {
    background: rgba(226,225,228,0.5);
  }
  .el-table .newUnreadComment{
    background: rgba(252,211,55,0.5);
  }
  .childrenComment{
    display: flex;
  }
  .pageHelper{
    text-align:center;
    margin-top: 30px;
  }
</style>
